import { Component, OnInit, ViewChild } from '@angular/core';
import { DropdownDirective, MenuItem } from '@iux/live';

@Component({
  templateUrl: './menu-button.component.html',
  styles: [
    `
      .ui-dropdown-button {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .ui-dropdown-button lv-select-trigger-icon {
        margin-left: 8px;
      }

      ::ng-deep .lv-button.ui-dropdown-button .lv-icon-host {
        color: #808080;
      }
    `,
  ],
})
export class MenuButtonComponent implements OnInit {
  menus: MenuItem[];

  @ViewChild('lvDropdown', { static: false }) lvDropdown: DropdownDirective;

  ngOnInit(): void {
    this.menus = this.getMenus();
  }

  getMenus(): MenuItem[] {
    return [
      { id: '1', label: 'MenuItem 01' },
      { id: '2', label: 'MenuItem 02' },
      { id: '3', label: 'MenuItem 03' },
      { id: '4', label: 'MenuItem 04' },
    ];
  }

  checkPanelState(): boolean {
    const animationState = this.lvDropdown?.dropdown?._animationState;
    return animationState?.includes('show');
  }
}
